<!-- 英雄列表 -->
<h2>My Heroes</h2>
<div>
   <label for="new-hero">Hero name：</label>
   <input id="new-hero" #heroName>

   <button type="button" class="add-button" (click)="add(heroName.value);
   heroName.value = ''">Add hero</button>
</div>
<ul class="heroes">
  <li *ngFor="let hero of heroes" [class.selected]="hero.id === selectedId">
    <!-- 只要是动态属性都是加[]，这指的是类选择器里面的.selected样式类 -->
    <!-- <button class="button" [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
       <span class="badge">{{hero.id}}</span>
       <span class="name">{{hero.name}}</span>
    </button> -->
    <a routerLink="/hero/{{hero.id}}" >
      <span class="badge">{{hero.id}}</span>{{hero.name}}
    </a>
    <button type="button" class="delete" title="delete hero" (click)="deleteHero(hero)">x</button>
  </li>
</ul>
<button type="button" routerLink="/sidekicks">Go to sidekicks</button>
